<template>
    <basic-container class="iotrules-page" v-if="permission['iotrules_view']">
        <!-- 顶部搜索框 -->
        <el-space wrap>
            <el-input v-model="search" style="width: 240px" placeholder="请输入" />
            <el-select v-model="triggerMethod" placeholder="请选择" style="width: 240px" @change="getIotrulesInfo">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" :icon="Search" @click="getIotrulesInfo">搜索</el-button>
            <el-button type="primary" :icon="Plus" title="新增" @click="addModelShow = true"
                v-if="permission['iotrules_add']">新增</el-button>
            <el-button :icon="Delete" title="删除" type="danger" plain @click="deleteData"
                v-if="permission['iotrules_delete']">删除</el-button>
        </el-space>
        <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%;margin-top: 30px;"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column property="createTime" label="创建时间" width="120" />
            <el-table-column property="rulesName" label="规则名称" width="120" />
            <el-table-column property="rulesType" label="规则类型" width="120" />
            <el-table-column property="状态" label="状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="2" :inactive-value="1"
                        @change="updateStatu(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column property="createUser" label="创建人" />
            <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" link @click="edit(scope.row)"
                        v-if="permission['iotrules_edit']">编辑</el-button>
                    <el-button :icon="Delete" title="删除" type="danger" plain @click="deleteData(scope.row)"
                        v-if="permission['iotrules_delete']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :background="true" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"
                :hide-on-single-page="false" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                style="margin-top: 10px;" />
        </div>
    </basic-container>
    <el-dialog v-model="addModelShow" :title="addFromItem ? '编辑设备' : '添加设备'" width="1200" :footer="false" top="5vh"
        :before-close="clearAdd">
        <IotrulesAdd :fromItem="addFromItem" @clearAdd="clearAdd" @submitAdd="submitAdd" v-if="addModelShow">
        </IotrulesAdd>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { getIotrulesList, update, add, remove, updateStatus } from "@/api/desk/iotrules";
import { Plus, Delete, View, Edit, Search } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import IotrulesAdd from './components/iotrulesAdd.vue'

const store = useStore()

const permission = computed(() => store.getters.permission)
const search = ref('')
const triggerMethod = ref(0)
const options = ref([{
    label: '全部',
    value: 0
}, {
    label: '定时控制',
    value: 1
}, {
    label: '联动控制',
    value: 2
}])
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const totalPage = ref(0)
const addFromItem = ref(null)

const addModelShow = ref(false)


const getIotrulesInfo = () => {
    getIotrulesList({
        triggerMethod: triggerMethod.value ? triggerMethod.value : '',
        current: currentPage.value,
        size: pageSize.value,
        search: search.value // TODO: 接口缺少模糊搜索参数
    }).then((res) => {
        totalPage.value = res.data.data.total
        tableData.value = res.data.data.records
    })
}

const multipleSelection = ref([])
const deleteData = (item?: any) => {
    if (!multipleSelection.value.length && !item) {
        return
    }
    ElMessageBox.confirm(
        '确认删除这些引擎吗?',
        '确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            remove(item ? item.id : multipleSelection.value.join(',')).then((res) => {
                ElMessage({
                    type: 'success',
                    message: '已成功删除',
                })
                getIotrulesInfo()
            })

        })
}

// 列表复选框
const handleSelectionChange = (val) => {
    multipleSelection.value = val.map(item => item.id);
}

const edit = (item: any) => {
    console.log(item)
    addFromItem.value = item
    addModelShow.value = true
}
// 关闭查看
const clearAdd = () => {
    addFromItem.value = null
    addModelShow.value = false
}
// 添加/编辑
const submitAdd = (from: any) => {
    if (from.id) {
        // 编辑
        update(from).then((res) => {
            ElMessage({
                message: res.data.msg,
                type: 'success'
            })
            clearAdd()
            getIotrulesInfo()
        })
    } else {
        // 添加
        add(from).then((res) => {
            ElMessage({
                message: res.data.msg,
                type: 'success'
            })
            clearAdd()
            getIotrulesInfo()
        })
    }
}

const updateStatu = (item) => {
    updateStatus({
        id: item.id,
        status: item.status
    }).then((res) => {
        ElMessage({
            message: res.data.msg,
            type: 'success'
        })
    })
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getIotrulesInfo()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getIotrulesInfo()
}

getIotrulesInfo()

</script>

<style lang="scss">
.iotrules-page {
    .pagination {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 30px;
    }
}
</style>
